<template>
<div class="movebox">
    <div class="up">
        <button type="button" class="btn btn-danger  btn-lg " @touchstart="click_move(0)">向上</button>
    </div>
    <button type="button" class="btn btn-danger  btn-lg " @touchstart="click_move(3)">向左</button>
    <button type="button" class="btn btn-danger  btn-lg " @touchstart="click_move(2)">向下</button>
    <button type="button" class="btn btn-danger  btn-lg " @touchstart="click_move(1)">向右</button>
</div>
</template>

<script>
import { useStore } from 'vuex';
export default{
    name:"MoveBox",
    setup(){
        const store = useStore();
        const click_move = d =>{
            store.state.user.socket.send(JSON.stringify({
                        event:"move",
                        direction:d,
                    }));
        }
        return{
            click_move,
        }
    }
}
</script>

<style scoped>
div.movebox{
    z-index:999;
    height: 10vh;
    width: 60vw;
    position: absolute;
    top: 75vh;
    left: 20vw;
}
div.up{
    margin-left: 70px;
}

</style>